<template>
  <div>
    <el-dialog
      modal-class="edit-name-dialog"
      v-model="_isOpen"
      width="1200"
      align-center
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="zone_dialog_title">设置空间尺寸数据</div>
      </template>
      <template #default>
        <el-table :data="spaceParamList" border height="600" stripe header-cell-class-name="table_head" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="spaceName" label="空间名称" />
          <el-table-column prop="area" label="面积">
            <template #default="{ row }">
              <el-input v-model="row.area" />
            </template>
          </el-table-column>
          <el-table-column prop="perimeter" label="周长">
            <template #default="{ row }">
              <el-input v-model="row.perimeter" />
            </template>
          </el-table-column>
          <el-table-column prop="length" label="长">
            <template #default="{ row }">
              <el-input v-model="row.length" />
            </template>
          </el-table-column>
          <el-table-column prop="width" label="宽">
            <template #default="{ row }">
              <el-input v-model="row.width" />
            </template>
          </el-table-column>
          <el-table-column prop="height" label="高">
            <template #default="{ row }">
              <el-input v-model="row.height" />
            </template>
          </el-table-column>
          <el-table-column prop="roofLength" label="梁长">
            <template #default="{ row }">
              <el-input v-model="row.roofLength" />
            </template>
          </el-table-column>
          <el-table-column prop="pillarLength" label="柱长">
            <template #default="{ row }">
              <el-input v-model="row.pillarLength" />
            </template>
          </el-table-column>
          <el-table-column prop="pillarWidth" label="柱宽">
            <template #default="{ row }">
              <el-input v-model="row.pillarWidth" />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <div class="dialog-footer" style="justify-content: end">
          <el-button type="info" @click="_isOpen = false" class="space_param_btn" style="background: #f2f3f5; color: black">
            取消
          </el-button>
          <el-button type="primary" @click="confirmClick" class="space_param_btn" :loading="loading" style="background: #424e66">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, defineEmits } from "vue";
import { updateSpaceParam } from "@/apis/quote-price/following";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  budgetId: { type: String, default: "" },
  spaceParamList: { type: Array, default: () => [] }
});

const emits = defineEmits(["update:modelValue", "success"]);

const _isOpen = computed({
  get: () => props.modelValue,
  set: newVal => emits("update:modelValue", newVal)
});

const confirmClick = async () => {
  let { code } = await updateSpaceParam(props.spaceParamList);
  code === 200 && emits("success");
  code === 200 && (_isOpen.value = false);
};
</script>

<style lang="scss">
.zone_dialog_title {
  font-size: 18px;
  font-weight: 700;
  color: black;
}
.table_head {
  background-color: #ebeef1 !important;
  border-right: 1px solid #e1e6ed !important;
  font-weight: 400;
}
.dialog-footer {
  .space_param_btn {
    width: 120px;
    border-radius: 2px !important;
    border: 0 !important;
  }
}
</style>
